import { useModal, useGlobalVar } from '@/hooks';
import { Modal, Popper } from '@/components';
import { DeleteIcon, SettingIcon, InfoIcon } from '@/components/icons';
import { request } from '@/request';
import { useHistory } from 'react-router-dom';

const GroupSetting = ({ handler, groups, refresh }) => {
   const { isOpen, openModal, closeModal } = useModal();
   const { refetchUser, groupId, user } = useGlobalVar();
   const history = useHistory();

   const handleChangeMain = (id: string) => {
      request('/user/maingroup', {
         method: 'POST',
         data: {
            mainGroup: id,
         },
         success: () => {
            refetchUser();
            closeModal();
         },
      });
   };

   const handleDeleteGroup = (id, e) => {
      request(`/groups/${id}`, {
         method: 'DELETE',
         success: () => {
            if (groupId === id) {
               handleChangeMain('');
            }
            refresh();
         },
         showSuccess: true,
      });
   };

   const handleUpdateGroup = (id, e) => {
      e.stopPropagation();
      history.push(`/group/${id}`);
   };

   const handleDetail = (id, e) => {
      e.stopPropagation();
      history.push(`/group-detail/${id}`);
   };

   return (
      <>
         <span onClick={openModal}>{handler}</span>
         <Modal
            showClose
            isOpen={isOpen}
            onClose={closeModal}
            header="选择分组"
         >
            <div className="space-y-2">
               {groups.map((item) => {
                  let cls = 'flex justify-between';
                  if (item._id === groupId) {
                     cls +=
                        ' pl-2 shadow-md rounded-sm border-l-4 border-l-indigo-800';
                  }
                  return (
                     <div className={cls} key={item._id}>
                        <span
                           className="grow"
                           onClick={handleChangeMain.bind(null, item._id)}
                        >
                           {item.group_name}
                        </span>
                        <span className="flex items-center space-x-1">
                           {item.createdBy === user._id && (
                              <>
                                 <Popper
                                    popperContent={
                                       <div className="color-disabled text-xs">
                                          确定要删除吗？
                                       </div>
                                    }
                                    showConfirm
                                    onConfirm={handleDeleteGroup.bind(
                                       null,
                                       item._id
                                    )}
                                 >
                                    <DeleteIcon size={16} type="danger" />
                                 </Popper>
                                 <SettingIcon
                                    onClick={handleUpdateGroup.bind(
                                       null,
                                       item._id
                                    )}
                                 />
                              </>
                           )}
                           <InfoIcon
                              size={16}
                              onClick={handleDetail.bind(null, item._id)}
                           />
                        </span>
                     </div>
                  );
               })}
            </div>
         </Modal>
      </>
   );
};

export default GroupSetting;
